<template>
	<view class="pb-150">
		<!-- 顶部背景 + 导航 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill" />
		<u-navbar :title="index1 ? '检测抽样列表' :index ? '检测单' : '抽样单'" :autoBack="true" leftIconColor="#fff"
			bgColor="transparent" :titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder />

		<view class="w-710 mgt bgff pl-32 pr-32 br-20 pt-20 pb-20" v-for="(item, index) in list" :key="item.id">
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">采样编号</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.sampleCode}}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">抽样场所</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.detectionPlace }}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">样品名称</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.product}}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">采样时间</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.sampleTime}}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">被抽样单位(个人)</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.ext3 }}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">采样地区</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.address }}</view>
			</view>

			<view style="display: flex;align-items: center;justify-content: flex-end;" v-if="!index1">
				<view class="w-132 h-52 colfff bg rowsc rowsm br-32" @click="edit(item.id)">修改</view>
			</view>
		</view>
		<view class="tongguo fixed" v-if="index1" style="bottom: 30rpx;left: 0;right: 0;z-index: 1000;">
			<view class="tg" @click="tongguo">通过</view>
			<view class="bh" @click="openReject">驳回</view>
		</view>

		<!-- 驳回申请弹窗（绿色主题） -->
		<u-popup :show="showReject" mode="center" round="14" :safeAreaInsetBottom="false" @close="closeReject">
			<view class="reject-modal">
				<view class="reject-header">
					<text class="title">驳回申请</text>
					<u-icon name="close" size="18" color="#999" @click="closeReject" />
				</view>
				<view class="reject-body">
					<view class="form-item type-item">
						<text class="label required">驳回类型</text>
						<view class="picker-input" @click.stop="toggleTypeDropdown">
							<text class="picker-text"
								:class="{ placeholder: !rejectForm.typeLabel }">{{ rejectForm.typeLabel || '请选择驳回类型' }}</text>
							<u-icon name="arrow-down" size="16" color="#999" />
						</view>
						<!-- 内嵌下拉列表 -->
						<view v-if="showTypeDropdown" class="dropdown" @click.stop>
							<view class="dropdown-item" v-for="opt in rejectTypeOptions" :key="opt.value" @click="chooseType(opt)">
								<text class="di-text">{{ opt.label }}</text>
								<u-icon v-if="rejectForm.type===opt.value" name="checkmark" size="16" color="#0A993B" />
							</view>
						</view>
					</view>

					<view class="form-item">
						<text class="label required">驳回原因</text>
						<u--textarea v-model="rejectForm.reason" :maxlength="reasonMax" placeholder="请输入驳回原因" count autoHeight />
					</view>
				</view>
				<view class="reject-footer">
					<u-button text="取消" @click="closeReject" :customStyle="btnCancelStyle" />
					<u-button text="确认驳回" @click="confirmReject" :customStyle="btnOkStyle" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getcyList,
		checkMonitorTask
	} from '@/api/sylin/index.js'
	export default {
		data() {
			return {
				list: [],
				id: '',
				index: '',
				index1: '',
				// 驳回弹窗
				showReject: false,
				rejectForm: {
					type: '',
					typeLabel: '',
					reason: ''
				},
				rejectTypeOptions: [{
						label: '抽样单编制',
						value: '1'
					},
					{
						label: '检测单编制',
						value: '2'
					}
				],
				reasonMax: 500,
				showTypeDropdown: false,
				btnCancelStyle: {
					flex: 1,
					background: '#fff',
					color: '#333',
					border: '1px solid #E5F3EA'
				},
				btnOkStyle: {
					flex: 1,
					background: '#0A993B',
					color: '#fff',
					border: '1px solid #0A993B'
				}
			};
		},
		onShow() {
			if (this.id) {
				this.getgetcyList(this.id)
			}
		},
		onLoad(options) {
			if (options.index1) this.index1 = options.index1
			if (options.index) this.index = options.index
			this.id = options.id
			this.getgetcyList(options.id)
		},
		methods: {
			async tongguo() {
				const res = await checkMonitorTask(this.id, {
					str: this.index1
				})
				uni.showToast({
					icon: 'none',
					title: '已通过'
				})
				uni.navigateBack()
			},
			openReject() {
				this.showReject = true
			},
			closeReject() {
				this.showReject = false
				this.showTypeDropdown = false
			},
			toggleTypeDropdown() {
				this.showTypeDropdown = !this.showTypeDropdown
			},
			chooseType(opt) {
				this.rejectForm.type = opt.value
				this.rejectForm.typeLabel = opt.label
				this.showTypeDropdown = false
			},
			async confirmReject() {
				if (!this.rejectForm.type) {
					return uni.showToast({
						title: '请选择驳回类型',
						icon: 'none'
					})
				}
				if (!this.rejectForm.reason || !this.rejectForm.reason.trim()) {
					return uni.showToast({
						title: '请输入驳回原因',
						icon: 'none'
					})
				}
				// 这里可对接后端接口，携带 this.id（页面路由id）及表单
				const payload = {
					id: this.id,
					rejectType: this.rejectForm.type,
					rejectTypeLabel: this.rejectForm.typeLabel,
					rejectReason: this.rejectForm.reason
				}
				let returnFlag = 1
				if(this.index1 == 5) {
					returnFlag = 1
				} else if(this.index1 == 6) {
					returnFlag = 2
				} else {
					returnFlag = 3
				}
				
				const res = await checkMonitorTask(this.id, {
					str: 12,
					returnType: this.rejectForm.type,
					returnFlag,
					returnReason: this.rejectForm.reason
				})
				console.log('驳回提交：', payload)
				uni.showToast({
					title: '已提交驳回',
					icon: 'success'
				})
				this.closeReject()
			},
			edit(id) {
				uni.navigateTo({
					url: `/pages/mydaiban/editchouyangdan/editchouyangdan?id=${id}`
				})
			},
			async getgetcyList(oldId) {
				const res = await getcyList({
					pageNum: 1,
					pageSize: 99999,
					oldId
				})
				console.log(res)
				this.list = res.rows
			}
		},
		computed: {
			navbarHeight() {
				// 如果设置了自定义高度，则使用自定义高度
				if (this.customNavbarHeight) {
					return this.customNavbarHeight;
				}
				// 否则自动计算：状态栏高度 + 导航栏高度
				const systemInfo = uni.getSystemInfoSync();
				// 将px转换为rpx (1px = 2rpx)
				const statusBarHeightRpx = systemInfo.statusBarHeight * 2;
				const navbarHeightRpx = 44 * 2; // 44px = 88rpx
				return statusBarHeightRpx + navbarHeightRpx;
			},
		}
	}
</script>

<style lang="scss">
	$green: #0A993B;
	$green-2: #23a44b;
	$line: #E5F3EA;
	$gray: #999;

	.tongguo {
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;

		.tg {
			width: 40%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: green;
			height: 80rpx;
			border-radius: 40rpx;
		}

		.bh {
			width: 40%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: red;
			height: 80rpx;
			border-radius: 40rpx;
		}
	}

	.mine-navbar-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 1;
	}

	/* 驳回弹窗样式 */
	.reject-modal {
		width: 650rpx;
		background: #fff;
		border-radius: 14rpx;
		overflow: hidden;
	}

	.reject-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 28rpx 12rpx;
		border-bottom: 1rpx solid $line;
	}

	.reject-header .title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.reject-body {
		padding: 20rpx 28rpx;
	}

	.form-item {
		margin-bottom: 18rpx;
	}

	.label {
		display: inline-block;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.label.required::before {
		content: '*';
		color: #f56c6c;
		margin-right: 6rpx;
	}

	.picker-input {
		height: 88rpx;
		border: 1rpx solid $line;
		border-radius: 10rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.picker-text {
		color: #333;
		font-size: 28rpx;
	}

	.picker-text.placeholder {
		color: #bbb;
	}

	.reject-footer {
		display: flex;
		gap: 16rpx;
		padding: 10rpx 28rpx 24rpx;
	}

	/* 下拉列表样式 */
	.type-item {
		position: relative;
	}

	.dropdown {
		position: absolute;
		left: 0;
		right: 0;
		top: 140rpx;
		background: #fff;
		border: 1rpx solid $line;
		border-radius: 10rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
		z-index: 20;
		max-height: 300rpx;
		overflow: auto;
	}

	.dropdown-item {
		padding: 22rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dropdown-item+.dropdown-item {
		border-top: 1rpx solid $line;
	}

	.di-text {
		font-size: 28rpx;
		color: #333;
	}
</style>